<template>
  <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="find-password-mobile-form" label-width="110px" label-position="left">
    <!-- 第一步 -->
    <template v-if="currentStep === 1">
      <el-form-item prop="phonenumber" label="手机账号：">
        <el-input :maxlength="11" size="small" style="width:250px" v-model="registerForm.phonenumber" type="text" auto-complete="new-password" placeholder="手机号" @input="handlePhoneInput">
        </el-input>
      </el-form-item>
      <el-form-item prop="code" label="手机验证码：">
        <el-input
          size="small"
          type="text"
          v-model="registerForm.code"
          placeholder="验证码"
          style="width:80px"
          auto-complete="new-password"
          @keyup.enter.native="handleRegister"
        >
        </el-input>
        <el-button
          size="small"
          style="margin-left:10px"
          :disabled="!canSendSms || isDisabled"
          @click="sendMessage"
        >{{ getSms }}</el-button>
      </el-form-item>
    </template>
    <!-- 第二步 -->
    <template v-if="currentStep === 2">
      <el-form-item prop="password" label="设置新密码：">
        <el-input
          size="small"
          style="width:250px"
          v-model="registerForm.password"
          type="password"
          auto-complete="new-password"
          placeholder="密码"
          @keyup.enter.native="handleRegister"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword" label="再次输入：">
        <el-input
          size="small"
          style="width:250px"
          v-model="registerForm.confirmPassword"
          type="password"
          auto-complete="new-password"
          placeholder="确认密码"
          @keyup.enter.native="handleRegister"
        >
        </el-input>
      </el-form-item>
    </template>
    <!-- 第三步 -->
    <template v-if="currentStep === 3">
      <div class="text-center mt50">深圳XX物流有限公司（001），新密码设置成功。</div>
    </template>
    <div>
      <el-form-item label="" label-width="0">
        <!-- 第一步 -->
        <el-button
          v-if="currentStep === 1"
          :loading="loading"
          size="small"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleRegister"
        >
          <span>确定</span>
        </el-button>
        <!-- 第二步 -->
        <el-button
          v-if="currentStep === 2"
          size="small"
          type="primary"
          style="width:20%;"
          @click="goBack"
        >
          <span>返回</span>
        </el-button>
        <el-button
          v-if="currentStep === 2"
          :loading="loading"
          size="small"
          type="primary"
          style="width:75%;"
          @click.native.prevent="handleRegister"
        >
          <span>确定</span>
        </el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import { getCodeImg, register,regSendSms,checkRegister } from "@/api/login";

export default {
  name: "Mobile",
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.registerForm.password !== value) {
        callback(new Error("密码输入不一致或密码输入格式有误"));
      } else {
        callback();
      }
    };
    return {
      codeUrl: "",
      registerForm: {
        phonenumber: "",
        password: "",
        confirmPassword: "",
        code: "",
        uuid: "",
        isRegistered: undefined,
      },
      registerRules: {
        phonenumber: [
          { required: true, trigger: "blur", message: "请输入手机号" },
          {
            pattern: /^1[3-9]\d{9}$/, message: '手机号输入格式有误', trigger: 'change'
          }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入密码" },
          { min: 5, max: 16, message: '密码5~16位，数字、字母、数字/字母+字符', trigger: 'change' }
        ],
        confirmPassword: [
          { required: true, trigger: "blur", message: "请再次输入密码" },
          { required: true, validator: equalToPassword,trigger: "change" }
        ],
        code: [
          { required: true, message: "请输入验证码" },
        ]
      },
      loading: false,
      captchaEnabled: true,
      canSendSms: false,
      timer: null,
      getSms: '获取',
      count: 60,
      isDisabled: false,
      currentStep: 1
    };
  },
  created() {
    this.getCode();
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.registerForm.uuid = res.uuid;
        }
      });
    },
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.currentStep++
          // this.loading = true;
          // register(this.registerForm).then(res => {
            
          // }).catch(() => {
          //   this.loading = false;
          // })
        }
      });
    },
    handlePhoneInput(val) {
      this.$refs.registerForm.validateField('phonenumber', (msg) => {
        console.log(msg)
        if (!msg) {
          checkRegister({ phonenumber: this.registerForm.phonenumber }).then(
              (res) => {
                this.registerForm.isRegistered = res.data === 0
                this.canSendSms = true
              }
          )
        } else {
          this.registerForm.isRegistered = undefined
          this.canSendSms = false
        }
      })
    },
    sendMessage() {
      if (!this.timer) {
        this.isDisabled = true
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 60) {
            this.count--
            if (this.count !== 0) {
              this.getSms = `${this.count}s`
            } else {
              clearInterval(this.timer)
              this.getSms = '获取'
              this.count = 60
              this.timer = null
              this.isDisabled = false
            }
          }
        }, 1000)
      }
      regSendSms({ phonenumber: this.registerForm.phonenumber }).then((res) => {
        if (res.code === 200 && res.data === true) {
          this.$message.success(res.msg)
        }
      })
    },
    goBack() {
      this.$refs.registerForm.clearValidate()
      this.currentStep--
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.find-password-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  .find-password-mobile-form {
    border-radius: 6px;
    background: #ffffff;
    padding: 25px 25px 5px 25px;
    .el-radio-group {
      width: 100%!important;
    }
    .el-radio-button {
      width: 50%!important;
    }
    .el-radio-button__inner {
      width: 100%!important;
    }
  }
  .find-password-mobile-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }
  .find-password-mobile-success {
    .el-form-item {
      margin-bottom: 0!important;
    }
  }
  .el-find-password-mobile-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 40px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }
}
</style>
